import React, {useEffect, useState} from 'react';
import {Form, Button, DatePicker, Input, Modal, Row, Col, Popconfirm, Select,message} from 'antd';
import {connect} from 'umi';
import moment from 'moment';
import store from 'store2';
const FormItem = Form.Item;
const {Option} = Select;

const formLayout = {
  labelCol: {span: 7},
};

const colStyle = {
  xl: 8,
  lg: 8,
  md: 8,
  sm: 8,
  xs: 8,
};

const AddForm = (props) => {
  const {onSubmit, onCancel, loading, record, visible, currentUser = {}, contractList,contractData} = props;
  const [form] = Form.useForm();
  const [isHide, setIsHide] = useState(false);

  useEffect(() => {
    if (currentUser && visible) {
      if (record) {
        handleSelectChange(record.modelId);
        form.setFieldsValue({
          ...currentUser, ...record,
          applyTime: moment(record.applyTime),
          position: record.position ? record.position : '无'
        });
      } else {
        const fieldsValue = store(`personnel-prove-` + currentUser.id);
        if(fieldsValue){
          handleSelectChange(fieldsValue.modelId);
          form.setFieldsValue({...fieldsValue,applyTime:moment(fieldsValue.applyTime)});
        }else {
          form.setFieldsValue({...currentUser, applyTime: moment(), position: '无'});
        }
      }
    }
  }, [visible]);

  const onFormCancel = () => {
    form.resetFields();
    setIsHide(false);
    onCancel();
  };

  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields();
    form.resetFields();
    setIsHide(false);
    onSubmit({...fieldsValue, oid: currentUser.id, id: record && record.id});
  };

  const handleSelectChange = (value) => {
    setIsHide(value === '31' ? true : false);
  };

  const onFormSave = async () => {
    const fieldsValue = await form.validateFields();
    store(`personnel-prove-` + currentUser.id,fieldsValue);
    message.success("信息暂存成功！");
  };


  const renderContent = () => {
    return (
      <>
        <Row gutter={24}>
          <Col {...colStyle}>
            <FormItem name="name" label="申请姓名">
              <Input disabled={true}/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="orgname" label="所属公司">
              <Input disabled={true}/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="department" label="所属部门">
              <Input disabled={true}/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="jobname" label="现任岗位">
              <Input disabled={true}/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="applyTime" label="申请时间">
              <DatePicker className='widthStyle' disabled={true}/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="companyId" label="甲方主体" rules={[{required: true, message: '甲方主体不能为空'}]}>
              <Select placeholder="请选择甲方主体" showSearch
                      filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                      allowClear>
                {contractData && contractData.map((item, index) => {
                  return (
                    <Option value={item.id} key={index}>
                      {item.name}
                    </Option>
                  )
                })}
              </Select>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="modelId" label="证明模板" rules={[{required: true, message: '证明模板不能为空'}]}>
              <Select placeholder="请选择证明模板" onChange={handleSelectChange}>
                {contractList.map((item, index) => {
                  return (
                    <Option value={item.id} key={index}>
                      {item.name}
                    </Option>
                  )
                })}
              </Select>
            </FormItem>
          </Col>
          <Col span={isHide ? 8 : 0}>
            <FormItem name="position" label="职称">
              <Input/>
            </FormItem>
          </Col>
        </Row>
      </>
    )
  };

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>取消</Button>
        <Button onClick={() => onFormSave()}>暂存</Button>
        <Popconfirm title={`是否发起证明申请?`}
                    onConfirm={() => handleSubmit()}
                    okText="是" cancelText="否">
          <Button type="primary" loading={loading}>提交</Button>
        </Popconfirm>
      </>
    )
  };

  return (
    <Modal
      maskClosable={false}
      width={'70%'}
      destroyOnClose
      title='证明申请'
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
      onClose={() => onFormCancel()}
      okText="确认"
      cancelText="取消">
      <Form
        {...formLayout}
        form={form}
        style={{paddingTop: '24px'}}>
        {renderContent()}
      </Form>
    </Modal>
  )
};

export default connect(({user}) => ({
  currentUser: user.currentUser
}))(AddForm)
